<template>
  <div>
    <h2>增加优惠券</h2>
    <table class="table table-bordered">
      <tr>
        <td align="right">优惠券类型</td>
        <td>
          <select v-model="state.dtId">
            <option value="">请选择</option>
            <option :value="item.dtId" v-for="item in discountTypeList">
              {{ item.dtName }}
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right">优惠券标题</td>
        <td>
          <input type="text" v-model="state.dTitle" />
        </td>
      </tr>
      <tr>
        <td align="right">优惠券颜色</td>
        <td>
          <input type="color" v-model="state.dColor" />
        </td>
      </tr>
      <tr>
        <td align="right">优惠券数量</td>
        <td>
          <input type="number" v-model="state.dNumber"/>
        </td>
      </tr>
      <tr>
        <td align="right">优惠券限领人数</td>
        <td>
          <input type="number" value="1" v-model="state.dCount" />
        </td>
      </tr>
      <tr>
        <td align="right">优惠券使用条件</td>
        <td>
          <input type="number" v-model="state.dMoney" />
        </td>
      </tr>
      <tr v-if="state.dtId == 1 || state.dtId == ''">
        <td align="right">优惠券减免金额</td>
        <td>
          <input type="number" v-model="state.dSubMoney" />
        </td>
      </tr>
      <tr v-if="state.dtId == 2">
        <td align="right">优惠券折扣</td>
        <td>
          <input type="number" v-model="state.dZheKou" />
        </td>
      </tr>
      <tr>
        <td align="right">优惠券使用开始时间</td>
        <td>
          <input type="date" v-model="state.dBeginTime" />
        </td>
      </tr>
      <tr>
        <td align="right">优惠券使用结束时间</td>
        <td>
          <input type="date" v-model="state.dEndTime" />
        </td>
      </tr>
      <tr>
        <td align="right">优惠券适用门店</td>
        <td>
          <select v-model="state.sId">
            <option value="0">全部门店</option>
            <option :value="item.sId" v-for="item in storeList">
              {{ item.sName }}
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right">备注</td>
        <td>
          <textarea cols="50" rows="3" v-model="state.dDesc"></textarea>
        </td>
      </tr>
      <tr>
        <td align="right"></td>
        <td>
          <input type="button" value="增加" @click="ok"/>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '../stores/user';

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

let data: any = reactive({
  storeList: [],
  discountTypeList: [],
  state: {
    dtId: '',
    dTitle: '',
    dColor: '',
    dNumber: '',
    dCount: 1,
    dMoney: '',
    dSubMoney: '' || 0,
    dZheKou: '' || 10,
    dBeginTime: '',
    dEndTime: '',
    sId: '0',
    dDesc: '',
  }
});



let { storeList, discountTypeList,state } = toRefs(data);

onMounted(() => {
  getStoreList();
  getDiscountTypeList();
});


//
const ok = ()=>{
  //1.非空+有效性验证
  //2.发送网络请求
  let obj = {
    dtId: state.value.dtId,
    dTitle: state.value.dTitle,
    dColor: state.value.dColor,
    dNumber: state.value.dNumber,
    dCount: state.value.dCount,
    dMoney: state.value.dMoney,
    dSubMoney: state.value.dSubMoney,
    dZheKou: state.value.dZheKou,
    dBeginTime: state.value.dBeginTime,
    dEndTime: state.value.dEndTime,
    sId: state.value.sId,
    dDesc: state.value.dDesc,
  }

  console.log(obj);
  
  axios({
    url:'/api/Test/PostAddDiscount',
    method:'post',
    data:obj
  })
  .then(res=>{
    console.log(res);
    if(res.data.data == 1){
      alert("增加成功");
      router.push("/discount")
    }else if(res.data.data == -1){
      alert("优惠券名称重复");
      return
    }else{
      alert("增加失败");
      return
    }
    
  })
  .catch(err=>{
    console.log(err);
    
  })
}


//获取门店列表
const getStoreList = () => {
  axios({
    url: '/api/Test/GetStoreList',
    method: 'get'
  })
    .then((res) => {
      console.log(res);
      storeList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//获取优惠券类型列表
const getDiscountTypeList = () => {
  axios({
    url: '/api/Test/GetDiscountTypeList',
    method: 'get'
  })
    .then((res) => {
      console.log(res);
      discountTypeList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
